<template>
  <div class="volume-control">
    <div class="icon" @click="onclick">
      <svg v-if="!isMute" t="1595957989387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3917">
        <path fill="#ffffff" d="M779.946667 357.12a42.666667 42.666667 0 1 0-66.56 53.76 170.666667
          170.666667 0 0 1 0 202.24A42.666667 42.666667 0 0 0 746.666667 682.666667a42.666667 42.666667
          0 0 0 33.28-15.786667 256 256 0 0 0 0-309.76z" p-id="3918">
        </path>
        <path fill="#ffffff" d="M837.973333 223.146667a42.666667 42.666667 0 1 0-54.613333 65.706666A290.133333
          290.133333 0 0 1 896 512a290.133333 290.133333 0 0 1-112.64 223.146667 42.666667 42.666667 0 0 0-5.546667
          60.16A42.666667 42.666667 0 0 0 810.666667 810.666667a42.666667 42.666667 0 0 0 27.306666-9.813334A373.333333
          373.333333 0 0 0 981.333333 512a373.333333 373.333333 0 0 0-143.36-288.853333zM617.386667 133.12a42.666667
          42.666667 0 0 0-42.666667 0L298.666667 322.986667H85.333333a42.666667 42.666667 0 0 0-42.666666 42.666666v292.693334a42.666667
          42.666667 0 0 0 42.666666 42.666666h213.333334l273.493333 187.733334A45.226667 45.226667 0 0 0 597.333333 896a42.666667
          42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-22.613333-37.546667z" p-id="3919">
        </path>
      </svg>
      <svg v-else t="1595957942819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3771">
        <path fill="#ffffff" d="M721.493333 600.746667l61.44 61.44a256 256 0 0 0-2.986666-305.066667 42.666667
          42.666667 0 1 0-66.56 53.76 170.666667 170.666667 0 0 1 8.106666 189.866667z" p-id="3772">
        </path>
        <path fill="#ffffff" d="M896 512a277.76 277.76 0 0 1-75.946667 187.306667l60.586667 60.586666A363.946667
          363.946667 0 0 0 981.333333 512a373.333333 373.333333 0 0 0-143.36-288.853333 42.666667 42.666667
          0 1 0-54.613333 65.706666A290.133333 290.133333 0 0 1 896 512zM640 519.253333V170.666667a42.666667
          42.666667 0 0 0-66.986667-35.413334L384 264.533333zM202.24 322.986667H85.333333a42.666667 42.666667
          0 0 0-42.666666 42.666666v292.693334a42.666667 42.666667 0 0 0 42.666666 42.666666h213.333334l273.493333
          187.733334A45.226667 45.226667 0 0 0 597.333333 896a42.666667 42.666667 0 0 0 42.666667-42.666667v-92.586666zM200.96
          140.373333a42.666667 42.666667 0 0 0-60.586667 60.586667l682.666667 682.666667a42.666667 42.666667 0 0 0 60.586667
           0 42.666667 42.666667 0 0 0 0-60.586667z" p-id="3773">
        </path>
      </svg>
    </div>
    <slider class="slider" :disabled="isMute" :value="value" v-on="$listeners"/>
  </div>
</template>

<script>
  import Slider from "@/components/common/video/Slider";
  export default {
    name: "Volume",
    components: {Slider},
    props: {
      value: {type: Number, default: 50},
    },

    data() {
      return {
        isMute: false,
        record: 0
      }
    },

    methods: {
      onclick() {
        let commit = 0
        this.isMute = !this.isMute
        if (this.isMute) {
          this.record = this.value
        } else {
          commit = this.record
        }

        this.$emit('change', commit)
        this.$emit('input', commit)
      },
    }
  }
</script>

<style scoped>
  div.icon {
    width: 20px;
    height: 20px;

    cursor: pointer;
  }

  div.icon > svg.icon {
    width: 18px;
    height: 18px;
  }

  .volume-control {
    width: 120px;
    display: flex;
  }

  .slider {
    flex-grow: 1;
    margin-left: 7px;
  }
</style>
